<template>
  <div class="filter-box">
    <el-radio-group
      v-if="setting.tabs"
      class="filter-box-tab"
      v-model="tabValue"
      size="small"
      @change="onTabChange"
    >
      <el-radio-button
        v-for="tab in setting.tabs"
        :key="tab.code"
        :label="tab.code"
      >
        {{ tab.name }}
      </el-radio-button>
    </el-radio-group>
    <div v-if="showAfterTabDividerComp" class="divider" />
    <el-button
      v-for="action in setting.actions"
      class="filter-box-button"
      size="small"
      :key="action.code"
      :type="action.type || 'default'"
      @click="onAction(action.code)"
    >
      {{ action.name }}
    </el-button>
    <div v-if="showAfterActionDividerComp" class="divider" />
    <filter-item
      v-if="setting.search"
      v-model="searchValue"
      type="search"
      :attr="setting.search.attr"
      :label="setting.search.label"
      :placeholder="setting.search.placeholder"
      @submit="submit"
    />
    <template v-if="setting.filters">
      <template v-for="(filter, index) in setting.filters">
        <filter-item
          v-if="!filter.isCustom"
          v-model="filterParams[filter.attr]"
          v-show="getShowStatus(index)"
          :key="filter.attr"
          :type="filter.type"
          :placeholder="filter.placeholder"
          :options="filter.options"
          :attr="filter.attr"
          :filterable="filter.filterable"
          :extra-options="filter.extraOptions || {}"
          v-bind="filter"
          @filter-select="onFilterSelect"
        />
        <template v-else>
          <component
            v-model="filterParams[filter.attr]"
            v-show="getShowStatus(index)"
            :is="filter.component"
            :attr="filter.attr"
            :filterable="filter.filterable"
            :extra-options="filter.extraOptions || {}"
            :key="filter.attr"
            :type="filter.type"
            :placeholder="filter.placeholder"
            :options="filter.options"
            v-bind="filter"
            @filter-select="onFilterSelect"
          ></component>
        </template>
      </template>
    </template>
    <div v-if="showAfterFilterDividerComp" class="divider" />
    <el-button
      class="filter-box-button"
      size="small"
      type="primary"
      @click="submit"
      >查询</el-button
    >
    <el-button class="filter-box-button" size="small" @click="reset"
      >清空条件</el-button
    >
    <div v-if="showAfterQueryDividerComp" class="divider" />
    <img
      v-if="showAfterQueryDividerComp"
      src="https://websitedn.yiautos.com/ymc_icon/web_drop_down.png"
      class="dropdown-button"
      :class="dropdownButtonClassComp"
      @click="onShrink"
    />
  </div>
</template>

<script>
import FilterItem from './FilterItem';

export default {
  name: 'ComFilterBox',
  components: {
    FilterItem,
  },
  props: {
    setting: {
      type: Object,
      required: true,
    },
  },
  computed: {
    showAfterTabDividerComp() {
      return this.setting.tabs && this.setting.tabs.length > 0;
    },
    showAfterActionDividerComp() {
      return this.setting.actions && this.setting.actions.length > 0;
    },
    showAfterFilterDividerComp() {
      return this.setting.filters && this.setting.filters.length > 0;
    },
    showAfterQueryDividerComp() {
      return this.setting.expand;
    },
    dropdownButtonClassComp() {
      return {
        'dropdown-button-shrink': this.isShrink,
      };
    },
  },
  data() {
    return {
      isReady: false,
      isShrink: true,
      tabValue: '',
      searchValue: '',
      filterParams: {
      },
    };
  },
  methods: {
    onShrink() {
      this.isShrink = !this.isShrink;
    },
    getShowStatus(index) {
      if (!this.isShrink) {
        return true;
      } else {
        return index < 4;
      }
    },
    initFilterState() {
      this.searchValue = '';
      const { tabs, filters } = this.setting;
      if (tabs && tabs.length > 0) {
        this.tabValue = tabs[0].code;
      }
      if (filters && filters.length > 0) {
        filters.forEach(filter => {
          // 不能让attr属性一样的值，否则默认值会无效
          const defaultValue = (filter && filter.defaultValue) || '';
          this.$set(this.filterParams, filter.attr, defaultValue);
		  console.log('this.filterParams',this.filterParams)
        });
      }
    },
    // 清空筛选项, 仅保留Switch状态
    resetFilterState() {
      this.searchValue = '';
      const { filters } = this.setting;
      if (filters && filters.length > 0) {
        filters.forEach(filter => {
          this.$set(this.filterParams, filter.attr, '');
        });
      }
    },
    reset() {
      this.resetFilterState();
      this.$emit('reset');
      this.submit();
    },
    submit() {
      this.$emit('change', {
        type: 'submit',
        data: {
          searchValue: this.searchValue,
          filterParams: this.filterParams,
        },
      });
    },
    onAction(action) {
      this.$emit('change', {
        type: 'action',
        data: action,
      });
    },
    onTabChange(tab) {
      this.$emit('change', {
        type: 'tab',
        data: tab,
      });
    },
    onFilterSelect({ event, data }) {
      console.log('收到FilterSelect事件 ==>', event, data);
      this.$emit('filter-select', { event, data });
      this.setting.filters.forEach(filter => {
        if (filter.receive && filter.receive === event) {
          this.$set(this.filterParams, filter.attr, '');
        }
      });
    },
    dynamicSetFilterValue({ attr, value }) {
      console.log('即将动态设置filter值 ==>', attr, value);
      this.$set(this.filterParams, attr, value);
    },
  },
  mounted() {
    console.log('FilterBox初始化 ==>', this.setting);
    this.initFilterState();
  },
};
</script>

<style scoped lang="less">
@import '../style/config';

.filter-box {
  width: 100%;
  background-color: #f5f5f5;
  padding-left: 15px;
  padding-top: 15px;
  box-sizing: border-box;
  .flexible(row, flex-start, flex-start);

  flex-wrap: wrap;
  &-tab {
    margin-right: 15px;
    margin-bottom: 15px;
  }

  &-button {
    margin-left: 0;
    margin-right: 15px;
    margin-bottom: 15px;
  }

  &-more {
    width: 36px;
    margin-bottom: 15px;
    .flexible(row, center, center);
  }

  .dropdown-button {
    width: 32px;
    height: 32px;
    margin-bottom: 15px;
    cursor: pointer;
    transform: rotate(180deg);
    .clickable;
    &-shrink {
      transform: rotate(360deg);
    }
  }
}

.divider {
  width: 1px;
  height: 32px;
  background: #e5e5e5;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
